<template>
<div>
  <div class="goodslist" v-for="(item,index) in goodslist" :key="index">
		<div class="image">
			<img :src="item.src" >
		</div>
		<div class="content">
			<p>{{item.title}}</p>
			<p class="price">￥{{item.price}}</p>
			<p><button type="button" @click="add(item)">加入购物车</button></p>
		</div>
  </div>
  </div>
</template>
<script >
	export default {
		name: 'goodslist',
		
		computed:{//shoplist的数据放在store里面进行集中管理的
			  goodslist(){
				  return this.$store.state.goodslist
			  }
		},
		methods:{
			  add(i){
				  this.$store.commit('add',i)
			  }
		}
	}
	
</script>
<style type="text/css">
	.goodslist{
		/* width: 400px; */
		height: 150px;
		display: flex;
		border-bottom: 1px solid #f8edf0;
		margin: 15px;
		/* background-color: #FEF5EF; */
		/* justify-content: center;
		align-items: center;
		 */
		flex-direction: row;
		align-items: center;
	}
	.image{
		width: 120px;
		height: 120px;
		border: #ccc 1px solid;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 5px;
	}
	.image img{
		width: 110px;
		height: 110px;
	}
	.content{
		display: flex;
		flex-direction: column;
		margin-left: 20px;
		justify-content: space-between;
	}
	.content p{
		font-size: 14px;
	/* 	color: #F18741; */
		height: 20px;
		line-height: 20px;
		/* border: #2C3E50 1px solid; */
	}
	.price{
		color: #f00;
	}
	button{
		background-color:coral ;
		color: #F8EDF0;
	}
</style>
